﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div id="idCaIncome" style="border-bottom:1px solid black;">
    <h3>Income Categories</h3>
    <img class="cWaiting" src="MetroUI/images/preloader-w8-line-black.gif" /> 
    <table id='idIncomeList'></table>
    </div>

    <div id="idCaExpense" style=" border-bottom:1px solid black;">
    <h3>Expense Categories</h3>
    <img class="cWaiting" src="MetroUI/images/preloader-w8-line-black.gif" /> 
    <table id='idExpenseList'></table>
    </div>
    
</body>
<script type="text/javascript">
    $(document).ready(function ()
    {
        $.ajax({
            type: "POST",
            url: "General.ashx",
            data: "mode=GetCategories&start=0&end=20&type=0",
            async: false,
            success: function (data)
            {
                var result = eval('(' + data + ')');
                for (var i = 0; i < result.length; i++)
                {
                    var name = result[i].name;
                    var key = result[i].key;
                    var cell = "<div class='tile model  bg-color-blue' style='width:80%; height:35px;' id='" + key.toString() + "'><h4>" + name + "</h4></div>"
                    if (result[i].type == 1)
                    {
                        $('#idIncomeList').append('<tr><td>' + cell + '</td></tr>');
                    }
                    else
                    {
                        $('#idExpenseList').append('<tr><td>' + cell + '</td></tr>');
                    }
                }
                $('.cWaiting').hide();
            }
        });

        $('.model').click(function ()
        {
            modelAction($(this));
        });
    });
    

</script>
</html>
